<template>
	<view>
		<view>
			<view class="dhl" style="background-color: #5EBCA3;"></view>
			<view class="topbar box dis_f_c_c" style="background-color: #5EBCA3;color: #FFF;">
					人脉
			</view>
		</view>
		<view class="r_btn dis_f_l_c" @click="go_fb">
			<image src="../../static/xuan_shang/xfj.png" mode=""></image>
			<view >发布人脉</view>
		</view>
		<view class="content">
			<image src="../../static/xuan_shang/xs_img.png" class="mid_img"></image>
			<!-- <view class="tips">温馨提示：当前共有10100人正在浏览名片</view> -->
			<view class="tab dis_f_sb_c">
				<view class="dis_f left">
					<view class="dis_f_l_c" style="margin-right: 38rpx;" @click="go_txl()">
						<image src="../../static/ren_mai/tab.png" mode=""></image>
						<view>前往通讯录</view>
					</view>
					<!-- <view class="dis_f_l_c" style="margin-right: 38rpx;"> -->
						<!-- <image src="../../static/ren_mai/tab.png" mode=""></image> -->
						<!-- <view>最新</view> -->
					<!-- </view> -->
				</view>
				<view class="dis_f_l_c right">
					<view class="dis_f_c_c r_tip">已屏蔽添加的名片</view>
					<!-- <view class="dis_f_l_c hyp">
						<image src="../../static/ren_mai/hyp.png" mode=""></image>
						<view @click="xiayiye">换一批</view>
					</view> -->
				</view>
			</view>
			<view class="dis_f_w dis_f_l_c" style="width: 100%;">
				<view class="mp dis_f_co_c_c" v-for="(item,index) in lists"  @click="info(item.id)">
					<image class="zdzt" src="../../static/ren_mai/zdzt.png" mode="" v-if="item.istop ==1"></image>
					<image class="tx" :src="item.avatar" mode=""></image>
					<view class="name">{{item.user_name}}</view>
					<view class="j_btn dis_f_c_c" @click.stop="jia(item)">加TA</view>
				</view>
			</view>
		</view>
		<u-popup v-model="show" mode="center" border-radius="10" width="500" height="300">
			<view class="tc">
				<view style="margin-bottom: 12rpx;">验证消息：</view>
				<u-input style="margin-bottom: 20rpx;" v-model="yz_text" type="text" :border="true"></u-input>
				<view style="width: 100%;" class="dis_f_c_c">
					<view class="dis_f_c_c sq_btn" @click.stop="sq_hy()">申请</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				lists:[],
				show:false,
				yz_text:'',
				page:1,
				status: 'nomore',
				zys:0,
				id:0,
			};
		},
		onLoad() {
			
		},
		onShow() {
			this.page = 1;
			this.lists = [];
			this.get_list();
		},
		methods:{
			onReachBottom() {
				// var xiabiao = this.current;
				console.log(111)
				if (this.page + 1 <= this.zys) {
					this.status = 'loading';
					this.page = ++this.page;
					this.get_list();
				} else {
					this.status = 'nomore';
					return;
				}
			},
			info(id) {
				this.$.open('/pages/ren_mai/rm_xq?id='+id)
			},
			xiayiye(){
				this.page = ++this.page;
				this.get_list();
			},
			jia(e){
				this.show = true;
				this.id = 0;
				this.yz_text = '';
				this.id = e.id;
			},
			sq_hy(){
				if (this.yz_text == '') {
					this.$.ti_shi('请输入验证');
				}
				this.$.ajax(1,"POST","fans/send_apply",{
					uid:uni.getStorageSync('uid'),
					token: uni.getStorageSync('token'),
					id:this.id,
					content:this.yz_text
				},(res)=>{
					this.show = false;
					this.id = 0;
					if (res.code == 1) {
						this.$.ti_shi(res.msg);
					}else{
						this.$.ti_shi(res.msg);
					}
				})
			},
			get_list(){
				this.$.ajax(1,"POST","fans/index",{
					uid:uni.getStorageSync('uid'),
					token: uni.getStorageSync('token'),
					page:this.page
				},(res)=>{
					if(res.code == 1) {
						this.zys = res.pagecount
						if(res.data != ''){
							res.data.forEach((item,index)=>{
								this.lists.push(item);
							})
						}
					}else{
						this.$.ti_shi(res.msg);
					}
				})
			},
			go_fb(){
				this.$.open('/pages/ren_mai/fb')
			},
			go_txl(){
				this.$.ti_shi('暂未开放')
				// this.$.open('/pages/ren_mai/txl')
			}
		}
	}
</script>

<style lang="scss">
	.sq_btn{
		width: 120rpx;
		height: 60rpx;
		background-color: #E23C63;
		color: #fff;
		border-radius: 10rpx;
	}
	.tc{
		width: 500rpx;
		height: 300rpx;
		padding: 24rpx;
	}
	.dhl {
		// position: absolute;
		width: 100%;
		height: var(--status-bar-height);
		position: fixed;
		top: 0;
		z-index: 999;
	}
	.topbar {
		width: 100%;
		z-index: 999;
		height: 88rpx;
		position: fixed;
		top: var(--status-bar-height);
		font-size: 34rpx;
		color: #212730;
		font-weight: bold;
		// background-image: url(../../static/index/bg.png);
		// padding: 0 0 26rpx 0rpx;
		
		.top_jt {
			width: 18rpx;
			height: 32rpx;
			position: absolute;
			left: 40rpx;
			top: 28rpx;
		}
	}
	.r_btn {
		position: fixed;
		z-index: 999;
		top: calc(var(--status-bar-height) + 22rpx);
		right: 48rpx;
		color: #fff;
	
		image {
			width: 32.99rpx;
			margin-right: 6rpx;
			height: 34rpx;
		}
	}
	.content{
		padding: calc(var(--status-bar-height) + 110rpx) 24rpx 0 24rpx;
		.mid_img {
			width: 100%;
			height: 200rpx;
			border-radius: 20rpx;
			margin-bottom: 36rpx;
		}
		.tips{
			font-size: 24rpx;
			line-height: 34rpx;
			color: #222222;
			margin-bottom: 32rpx;
		}
		.tab{
			padding: 19rpx 24rpx;
			margin-bottom: 24rpx;
			background-color: #FFF;
			box-shadow: 0rpx 6rpx 24rpx rgba(34, 34, 34, 0.05);
			border-radius: 10rpx;
			.left{
				font-size: 24rpx;
				line-height: 34rpx;
				image{
					width: 29.88rpx;
					height: 19.76rpx;
					margin-right: 10rpx;
				}
			}
			.right{
				font-size: 24rpx;
				color: #BBBBBB;
				.r_tip{
					// width: 170rpx;
					padding: 0 12rpx;
					margin-right: 12rpx;
					height: 40rpx;
					background-color: #FFF5BC;
					border-radius: 6rpx;
				}
				.hyp{
					image{
						width: 25.35rpx;
						height: 21.72rpx;
						margin-right: 6rpx;
					}
				}
			}
		}
		.mp{
			width: 158rpx;
			height: 194rpx;
			background-color: #FFF;
			border-radius: 10rpx;
			box-shadow: 0rpx 6rpx 24rpx rgba(34, 34, 34, 0.05);
			margin-bottom: 30rpx;
			position: relative;
			margin-right: 16rpx;
			.zdzt{
				width: 48.18rpx;
				height: 52.28rpx;
				position: absolute;
				top: 0;
				right: 0;
			}
			.tx{
				width: 76rpx;
				height: 76rpx;
				border-radius: 50%;
				margin-bottom: 6rpx;
			}
			.name{
				font-size: 22rpx;
				line-height: 32rpx;
				margin-bottom: 12rpx;
			}
			.j_btn{
				width: 88rpx;
				height: 38rpx;
				font-size: 16rpx;
				color: #fff;
				background-color: #E23C63;
				border-radius: 18rpx;
			}
		}
	}
</style>
